<template>
  <div class="loginBox">
    <div class="Exit">
      <span class="iconfont iconicon-test"></span>
    </div>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <inputCompon
      textplaceholder="请输入手机号码"
      type="text"
      rule="\d{5,11}"
      err_Msg="请输入正确的手机号码"
      @setval="setusername"
    ></inputCompon>
    <inputCompon
      textplaceholder="请输入密码"
      type="password"
      rule=".{3,9}"
      err_Msg="请输入正确的密码"
      @setval="setuserpassword"
    ></inputCompon>
    <btnCompon btnval="登录" @login="login"></btnCompon>
    <div class="toregister">
      <router-link to="/register">还没账号?马上注册</router-link>
    </div>
  </div>
</template>

<script>
import inputCompon from "@/components/inputCompon";
import btnCompon from "@/components/btnCompon";
export default {
  data() {
    return {
      username: "",
      userpassword: ""
    };
  },
  components: {
    inputCompon,
    btnCompon
  },
  methods: {
    setusername(username) {
      this.username = username;
    },
    setuserpassword(userpassword) {
      this.userpassword = userpassword;
    },
    login() {
      if (!this.username || !this.userpassword) {
        this.$toast.fail("不能留空");
        return;
      }
      this.$axios({
        url: "/login",
        method: "post",
        data: {
          username: this.username,
          password: this.userpassword
        }
      }).then(res => {
        if (res.data.message == "登录成功") {
          console.log(res);
          // this.$toast.success(res.data.message);
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem("userId", res.data.data.user.id);

          this.$toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            message: "登录成功 正在跳转"
          });

          let second = 3;
          const timer = setInterval(() => {
            second--;
            if (second) {
              this.$toast.message = `登录成功 正在跳转`;
            } else {
              clearInterval(timer);
              // 手动清除 Toast
              this.$toast.clear();
              this.$router.push("/user");
            }
          }, 1000);
        } else {
          this.$toast.fail(res.data.message);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.Exit {
  margin: 6.667vw;
  .iconicon-test {
    font-size: 6.667vw;
  }
}
.logo {
  text-align: center;
  .iconnew {
    color: red;
    font-size: 33.333vw;
  }
}
.toregister {
  font-size: 12px;
  color: red;
  text-align: center;
}
</style>